<script setup>
import { Edit, Delete } from '@element-plus/icons-vue'
import { articleDeleteCategoryService, articleGetCategoryListService } from '@/api/article'
import { ref } from 'vue'
import ChannelEdit from './components/ChannelEdit.vue'
import { ElMessageBox } from 'element-plus'
// 设置载入状态
const loading = ref(false)

// 分类列表
const categoryList = ref([])

const dialog = ref({})
// 获取分类列表
const getCategoryList = async () => {
  loading.value = true
  const res = await articleGetCategoryListService()
  categoryList.value = res.data.data
  loading.value = false
}
getCategoryList()

// 添加按钮，事件处理函数
const onAddChannel = () => {
  dialog.value.open({})
}
// 编辑按钮，事件处理函数
const onEditChannel = (scope) => {
  dialog.value.open(scope.row)
}
// 删除按钮，事件处理函数
const onDeleteChannel = async (scope) => {
  await ElMessageBox.confirm('确定删除该分类吗？', '温馨提示', {
    type: 'warning',
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  })
  await articleDeleteCategoryService(scope.row.id)
  getCategoryList()
}
</script>

<template>
  <PageContainer :title="'文章分类'">
    <!-- 按钮 -->
    <template #extra>
      <el-button type="primary" @click="onAddChannel">添加分类</el-button>
    </template>
    <!-- 内容 -->
    <template #default>
      <!-- 表格，展示数据 -->
      <el-table :data="categoryList" style="width: 100%" v-loading="loading">
        <el-table-column type="index" label="序号" width="100"></el-table-column>
        <el-table-column prop="cate_name" label="分类名称"></el-table-column>
        <el-table-column prop="cate_alias" label="分类别名"></el-table-column>
        <el-table-column prop="index" label="操作">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-button
                plain
                circle
                type="primary"
                :icon="Edit"
                @click="onEditChannel(scope)"
              ></el-button>
              <el-button
                plain
                circle
                type="danger"
                :icon="Delete"
                @click="onDeleteChannel(scope)"
              ></el-button>
            </div>
          </template>
        </el-table-column>
        <template #empty>
          <el-empty description="暂无数据" />
        </template>
      </el-table>
      <!-- 弹层 -->
      <ChannelEdit ref="dialog" @success="getCategoryList"></ChannelEdit>
    </template>
  </PageContainer>
</template>

<style lang="scss" scoped></style>
